<template>
    <view>
        <Header returnIcon="white" :background="background" :title="title" />
        <view class="content" :style="{'height': `${noBarHeight}px`}">
            <view class="main">
                <view class="title">意见反馈:</view>
<!--                <textarea name="" id="" cols="30" rows="10"></textarea>-->
                <textarea
                    maxlength="200"
                    class="input_text"
                    v-model="textValue"
                    type="text"
                    placeholder="输入意见内容"
                    :placeholderStyle="{
                        height: '321rpx',
                        ontSize: '28rpx',
                        fontFamily: 'PingFangSC, PingFang SC',
                        fontWeight: 400,
                        color: '#C3C3C3',
                        lineHeight: '40rpx'
                    }"
                />
                <view class="size_length">{{ textValue.length || 0 }}/200字</view>
            </view>
            <view class="btn" @click="onSubmit">提交反馈</view>
        </view>

    </view>
</template>
<script>
import CheckTitle from "@/components/CheckTitle.vue";
import Header from "@/components/Header.vue";
import {feedbackOpinion} from "../../../utils/api/user";
var app = getApp()
export default ({
    name: "help",
    data() {
        return {
            background: 'linear-gradient(0, #5162FD, #8E4EF7)',
            title: '提交反馈',
            noBarHeight: app.globalData.noBarHeight,
            textValue: '',
        }
    },
    components: {
        Header
    },
    onLoad(options) {
        this.id = options.id
    },
    methods: {
        onSubmit() {
            if (this.content) {
                uni.showToast({
                    title: '请确认内容',
                    icon: 'none'
                })
                return
            }
            const params = {
                uid: uni.getStorageSync('uid'),
                conten: this.textValue
            }
            // if (this.id) params.id = this.id
            feedbackOpinion(params).then(res => {
                console.log(res, 'res---')
                uni.navigateBack(1)
            })
        }
    }
})
</script>

<style scoped lang="scss">
.content {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    background: #f8f8f8;
    overflow-y: auto;
    .main {
        width: 100%;
        min-height: 440rpx;
        background: white;
        margin: 12rpx 0 24rpx 0;
        padding: 40rpx;
        box-sizing: border-box;
        .title {
            height: 40rpx;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: bold;
            color: #494949;
            line-height: 40rpx;
            margin-bottom: 20rpx;
        }
        .input_text {
            width: 100%;
            min-height: 320rpx;
        }
        .size_length {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #C3C3C3;
            line-height: 40rpx;
            width: 100%;
            text-align: right;
        }
    }
    .btn {
        width: 90%;
        height: 88rpx;
        background: linear-gradient(180deg, #8E4EF7 0%, #5162FD 100%);
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 40rpx;
    }
}
</style>
